<template>
    <div class="login-container">
        <!-- 背景图容器，增加毛玻璃效果 -->
        <div class="bg-image" :style="{ backgroundImage: `url(${bgUrl})` }" ref="bgImage"></div>

        <!-- 半透明遮罩层 -->
        <div class="mask"></div>

        <!-- 注册表单，增加悬浮阴影 -->
        <div class="login-form">
            <!-- 标题区域，带渐变动画 -->
            <div class="title-container">
                <h2 class="title">欢迎注册</h2>
                <div class="title-line"></div>
            </div>

            <!-- 输入框组，增加微动效 -->
            <div class="form-item">
                <el-input v-model="username" placeholder="请输入用户名" prefix-icon="el-icon-user" class="input-item"
                    :placeholder-style="{ color: 'rgba(255,255,255,0.6)' }">
                    <template #prefix>
                        <i class="el-icon-user" style="color: #409eff;"></i>
                    </template>
                </el-input>
            </div>

            <div class="form-item">
                <el-input v-model="password" type="password" placeholder="请输入密码" prefix-icon="el-icon-lock"
                    class="input-item" :placeholder-style="{ color: 'rgba(255,255,255,0.6)' }">
                    <template #prefix>
                        <i class="el-icon-lock" style="color: #409eff;"></i>
                    </template>
                </el-input>
            </div>

            <div class="form-item">
                <el-input v-model="confirmPassword" type="password" placeholder="请确认密码" prefix-icon="el-icon-lock"
                    class="input-item" :placeholder-style="{ color: 'rgba(255,255,255,0.6)' }">
                    <template #prefix>
                        <i class="el-icon-lock" style="color: #409eff;"></i>
                    </template>
                </el-input>
            </div>

            <!-- 按钮组，增加呼吸灯效果 -->
            <div class="form-item btn-group">
                <el-button type="primary" @click="handleRegister" class="login-btn"
                    :style="{ background: '#409eff', borderColor: '#409eff' }" v-mouseenter="handleButtonEnter"
                    v-mouseleave="handleButtonLeave">
                    立即注册
                    <span class="ripple" :style="{ left: rippleX + 'px', top: rippleY + 'px' }"></span>
                </el-button>
            </div>

            <!-- 提示文字，增加渐变配色 -->
            <div class="register-tip">
                已有账号？
                <el-link @click="handleLogin" class="login-link"
                    :style="{ background: 'linear-gradient(135deg, #409eff, #66b1ff)' }">
                    立即登录
                </el-link>
            </div>

            <div class="phone-login-tip">
                <el-link @click="handlePhoneLogin" class="phone-login-link">
                    <i class="el-icon-phone" style="color: #409eff;"></i>
                    手机号注册
                </el-link>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import http from '@/http'

const router = useRouter()
const bgUrl = 'https://ts1.tc.mm.bing.net/th/id/R-C.e3343aa8e6874c4b3703f98fcdbbe3e1?rik=%2bWpBT4qQo4iDSw&riu=http%3a%2f%2fimage.glwsq.cn%2f201910%E5%A3%81%E7%BA%B8_e4790325e7b13f3df8fc8967b1698cdc&ehk=qHUodgesM8g%2b%2fIG3qfehLkM7MQMswVIVZPIINXu3KBE%3d&risl=&pid=ImgRaw&r=0'

const username = ref('')
const password = ref('')
const confirmPassword = ref('')

const ripple = ref<HTMLSpanElement>()
const rippleX = ref(0)
const rippleY = ref(0)

const handleButtonEnter = (e: MouseEvent) => {
    const btn = e.target as HTMLElement
    const rect = btn.getBoundingClientRect()
    rippleX.value = e.clientX - rect.left
    rippleY.value = e.clientY - rect.top
    ripple.value?.classList.add('ripple-active')
}

const handleButtonLeave = () => {
    ripple.value?.classList.remove('ripple-active')
}

// 背景视差效果优化
let isDragging = false
let startY = 0
const bgImage = ref<HTMLDivElement>()

const handleMouseMove = (e: MouseEvent) => {
    if (isDragging) {
        const deltaY = e.clientY - startY
        bgImage.value!.style.backgroundPositionY = `${deltaY * 0.3}px` // 降低滚动速度
        startY = e.clientY
    }
}

const handleMouseDown = (e: MouseEvent) => {
    isDragging = true
    startY = e.clientY
    document.addEventListener('mousemove', handleMouseMove)
}

const handleMouseUp = () => {
    isDragging = false
    document.removeEventListener('mousemove', handleMouseMove)
}


const handleRegister = () => {
    http({ method: 'post', url: 'register/', data: { uname: username.value, password: password.value } })
        .then(resp => {
            if (resp.status === 200) {
                ElMessage.success('注册成功！请登录')
                router.push('/clogin')
            } else {
                ElMessage.error('注册失败，请重试')
            }
        })
}

const handleLogin = () => router.push('/clogin')
const handlePhoneLogin = () => router.push('/pregister')
</script>

<style scoped lang="scss">
.login-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #0a192f;
}

.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.8) contrast(0.9);
    transition: all 0.5s ease;
}

.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 25, 47, 0.6);
}

.login-form {
    position: relative;
    z-index: 10;
    width: 400px;
    padding: 50px 40px;
    margin: 50px auto;
    background: rgba(10, 25, 47, 0.85);
    border-radius: 24px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);

    .title-container {
        text-align: center;
        margin-bottom: 40px;

        .title {
            color: #fff;
            font-size: 2.2em;
            font-weight: 600;
            margin-bottom: 15px;
            background: linear-gradient(135deg, #409eff, #66b1ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: titleFade 1.5s ease infinite;
        }

        .title-line {
            width: 60px;
            height: 3px;
            background: #409eff;
            margin: 0 auto;
            border-radius: 2px;
            animation: linePulse 2s ease infinite;
        }
    }

    .form-item {
        margin-bottom: 25px;

        .input-item {
            background: transparent !important;
            border: none !important;
            border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
            color: #fff !important;
            font-size: 1.1em;

            &:focus {
                border-bottom-color: #409eff !important;
                box-shadow: none !important;
            }

            .el-input__prefix {
                color: #409eff;
                font-size: 1.2em;
            }
        }
    }

    .btn-group {
        text-align: center;
        margin: 30px 0;

        .login-btn {
            position: relative;
            overflow: hidden;
            padding: 14px 40px;
            font-size: 1.1em;
            font-weight: 500;
            border-radius: 30px;
            transition: all 0.3s ease;

            .ripple {
                position: absolute;
                width: 20px;
                height: 20px;
                background: rgba(255, 255, 255, 0.2);
                border-radius: 50%;
                transform: scale(0);
                transition: transform 0.5s ease;

                &.ripple-active {
                    transform: scale(1.8);
                }
            }

            &:hover {
                background: #66b1ff;
                box-shadow: 0 4px 16px rgba(64, 158, 255, 0.3);
            }
        }
    }

    .register-tip,
    .phone-login-tip {
        color: rgba(255, 255, 255, 0.8);
        text-align: center;
        font-size: 0.95em;

        .el-link {
            color: #409eff;
            font-weight: 500;
            text-decoration: none;
            position: relative;

            &:hover {
                color: #66b1ff;
                text-decoration: underline;
            }

            &.login-link {
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
                background-image: linear-gradient(135deg, #409eff, #66b1ff);
            }
        }
    }
}

// 动画定义
@keyframes titleFade {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

@keyframes linePulse {

    0%,
    100% {
        width: 60px;
    }

    50% {
        width: 80px;
    }
}

// 响应式设计
@media (max-width: 768px) {
    .login-form {
        width: 90%;
        max-width: 360px;
        padding: 40px 30px;
    }

    .title {
        font-size: 1.8em;
    }
}
</style>